<template>
  <div class="container">
    <xy-table
      ref="table"
      :columns="columns"
      :list="model.TransactionBatchSubEx"
      :param="params"
    >
      <template slot="addItem">
        <search-header
          :model="params"
          :on-search="onSearch"
          keywords="BeneficiaryName"
        >
        </search-header>
      </template>
      <el-row slot="cards" :gutter="16" class="mb-1 mt-1">
        <el-col :span="6">
          <el-card>
            <div class="row">
              <div class="col-1 icon">
                <i class="iconfont icon-renminbi mr-1"></i>
              </div>
              <div class="card-body col-1">
                <div class="title">
                  {{ $language.local("PaymentOutAmount") }}
                </div>
                <div class="num">
                  {{ model.PaymentOutAmount }}
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card>
            <div class="row">
              <div class="col-1 icon">
                <i class="iconfont icon-yue mr-1 green"></i>
              </div>
              <div class="card-body col-1">
                <div class="title">
                  {{ $language.local("succAmount") }}
                </div>
                <div class="num">
                  {{ model.succAmount }}
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card>
            <div class="row">
              <div class="col-1 icon">
                <i class="iconfont icon-renminbi mr-1 blue"></i>
              </div>
              <div class="card-body col-1">
                <div class="title">
                  {{ $language.local("currAmount") }}
                </div>
                <div class="num">
                  {{ model.currAmount }}
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card>
            <div class="row">
              <div class="col-1 icon">
                <i class="iconfont icon-yue mr-1 red"></i>
              </div>
              <div class="card-body col-1">
                <div class="title">
                  {{ $language.local("failAmount") }}
                </div>
                <div class="num">
                  {{ model.failAmount }}
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <template #operation="">
        <span></span>
      </template>
    </xy-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      columns: {
        ordrId: "XYBN2021061812021000001",
        MerchantName: "湖南大海网络科技有限公司",
        ServiceProviderName: "湖南好捷科技有限公司",
        atime: "2021-06-18",
        PaymentOutAmount: 25000,
        BeneficiaryName: "张三",
        BeneficiaryAccountNumber: "6222021908004155521",
        // BusinesStatusName: "待处理(草稿)",
        BusinesStatus: "0",
        // ServiceContent: "",
        PayStatusName: "待提交",
        // systemCheck: "服务科目不正确",
        // sysRtnDesc: "交易失败",
        // idCardNo: "430781199010150529",
        // PaymentOutBatchNo: null,
        // BatchNo: "BN21061812021098",
        // PaymentOutOrderNo: "BN21061812021098001",
        // MerchantCode: "YJS20210610001",
      },
      model: "",
      params: {
        SID: "",
        MID: "",
        BusinesStatus: "",
        BeginDate: "",
        EndDate: "",
      },
    };
  },
  created() {
    this.getData();
  },
  methods: {
    async getData(query) {
      let response = await this.$http.get("/api/statistics/statements", query);
      console.log(response);
      this.model = response.data.Data;
    },
    onSearch(e) {
      // this.params = e;
      console.log(e);
      console.log(this.$refs.table);
      this.getData(e);
    },
  },
};
</script>

<style lang="less" scoped>
.el-card {
  .row {
    display: flex;
    justify-content: space-between;
    .icon {
      display: flex;
      justify-content: center;
      i {
        font-size: 3rem;
      }
      .iconfont {
        &.green {
          color: green !important;
        }
      }
    }
    .card-body {
      .title {
        color: gray;
        font-size: 12px;
      }
      .num {
        margin-top: 1ex;
        font-size: 1.2rem;
      }
    }
  }
}
</style>
